<template>
  <el-dialog v-el-drag-dialog :title="!form.attrId?'新建属性':'编辑属性'" :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose">
    <el-form ref="attrForm" :model="form" :rules="rules" label-width="120px" :disabled="!hasLoaded">
      <el-card>
        <el-form-item hidden>
          <el-input v-model="form.attrId" hidden />
        </el-form-item>
        <el-form-item label="属性名称" prop="attrName">
          <el-input v-model="form.attrName" />
        </el-form-item>
        <el-form-item label="属性类型" prop="attrType">
          <el-select v-model="form.attrType" placeholder="请选择">
            <el-option label="规格参数" value="1"></el-option>
            <el-option label="销售属性" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="值类型" prop="valueType">
          <el-switch
            v-model="form.valueType"
            active-text="多选"
            inactive-text="单选"
            active-color="#409EFF"
            inactive-color="#C0CCDA"
            inactive-value="0"
            active-value="1"
          ></el-switch>
        </el-form-item>
        <el-form-item label="可选值" prop="valueSelect">
          <el-select
            v-model="form.valueSelectData"
            multiple
            filterable
            allow-create
            placeholder="请输入"
            style="width: 90%"
          ></el-select>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <div style="display:flex;">
            <icon-picker v-model="form.icon" style="width:90%" />
            <i class="el-icon-delete" @click="form.icon=''" />
          </div>
        </el-form-item>
        <el-form-item label="所属分类" prop="catalogPath">
          <el-cascader
            v-model="form.catalogPath"
            filterable
            clearable
            placeholder="试试搜索：手机"
            :options="categoryData"
            :props="props"
            @change="handleChangeCatalog"
          />
        </el-form-item>
        <el-form-item v-if="form.attrType === '1'" label="可检索" prop="searchType">
          <el-switch
            v-model="form.searchType"
            active-color="#409EFF"
            inactive-color="#C0CCDA"
            active-value="0"
            inactive-value="1"
          ></el-switch>
        </el-form-item>
        <el-form-item v-if="form.attrType === '1'" label="快速展示" prop="showDesc">
          <el-switch
            v-model="form.showDesc"
            active-color="#409EFF"
            inactive-color="#C0CCDA"
            active-value="0"
            inactive-value="1"
          ></el-switch>
        </el-form-item>
        <el-form-item label="启用状态" prop="enable">
          <el-switch
            v-model="form.enable"
            active-color="#409EFF"
            inactive-color="#C0CCDA"
            active-value="0"
            inactive-value="1"
          ></el-switch>
        </el-form-item>
      </el-card>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button v-if="hasLoaded" type="primary" icon="el-icon-check" @click="onSubmit">确 定</el-button>
      <el-button icon="el-icon-close" @click="onClose">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { attrLoad, attrSave } from '@/api/mall/product/attr'
import { categoryTreeData } from '@/api/mall/product/category'
import IconPicker from '@/components/IconPicker'

export default {
  name: 'AttrFormDialog',
  components: {
    IconPicker
  },
  data() {
    return {
      visible: false,
      appendToBody: true,
      hasLoaded: false,
      form: {
        attrId: undefined,
        attrGroupId: undefined,
        attrName: undefined,
        attrType: '1',
        valueType: '0',
        valueSelect: '',
        valueSelectData: [],
        icon: '',
        catalogId: undefined,
        catalogPath: [],
        searchType: '1',
        showDesc: '1',
        enable: '0'
      },
      rules: {
        attrName: [{ required: true, trigger: 'blur', message: '属性名称不能为空' }],
        catalogPath: [{ required: true, trigger: 'blur', message: '所属分类不能为空' }]
      },
      props: {
        value: 'id',
        label: 'name'
      },
      categoryData: []
    }
  },
  methods: {
    init(attrId, catalogId, attrType, attrGroupId) {
      this.hasLoaded = false
      this.form.categoryData = []
      this.form.attrId = attrId || null
      this.form.catalogId = catalogId || null
      this.form.attrType = attrType || '1'
      this.form.attrGroupId = attrGroupId || undefined
      this.visible = true
      this.$nextTick(() => {
        this.getCategoryData()
        this.$refs.attrForm.resetFields()
        this.loadForm(attrId, catalogId, attrType)
      })
    },
    loadForm(attrId, catalogId, attrType) {
      attrLoad({
        'attrId': attrId,
        'catalogId': catalogId,
        'attrType': attrType
      }).then(response => {
        this.form = this.$api.objectUpdate(this.form, response.param)
        if (this.form.valueSelect) {
          this.form.valueSelectData = this.form.valueSelect.split(';')
        }

        // 判断当前用户权限
        this.hasLoaded = this.$perm.hasPermissionOr(['mall:product:attr'])
      }).catch(() => {})
    },
    getCategoryData() {
      categoryTreeData({
        from: 'vue',
        excludeRoot: 'true'
      }).then(response => {
        this.categoryData = response
      }).catch(() => {})
    },
    handleChangeCatalog(value) {
      this.form.catalogId = value[value.length - 1]
    },
    onSubmit() {
      if (this.form.valueSelectData.length > 0) {
        this.form.valueSelect = this.form.valueSelectData.join(';')
      }
      this.$refs.attrForm.validate(valid => {
        if (valid) {
          attrSave(this.form).then(response => {
            this.$modal.msgSuccess(response.msg)
            this.$emit('confirmForm')
            this.$refs.attrForm.resetFields()
            this.visible = false
          }).catch(() => {})
        }
      })
    },
    onClose() {
      this.form = {
        attrId: undefined,
        attrName: undefined,
        attrType: '1',
        valueType: '0',
        valueSelect: '',
        valueSelectData: [],
        icon: '',
        catalogId: undefined,
        catalogPath: [],
        searchType: '1',
        showDesc: '1',
        enable: '0'
      }
      this.visible = false
    }
  }
}
</script>
